<template>
  <div>
    <div class="box">
      <div class="box-body">
        <el-form :inline="true" :model="query" label-position="top">
          <el-form-item label="申请时间:">
            <el-col :span="11">
              <el-date-picker v-model="query.fromDate" type="date" placeholder="起始时间" />
            </el-col>
            <el-col :span="2" class="text-center">至</el-col>
            <el-col :span="11">
              <el-date-picker v-model="query.toDate" type="date" placeholder="截止时间" />
            </el-col>
          </el-form-item>
          <el-form-item label="所属分销商:">
            <el-select v-model="query.dtbId" clearable filterable remote placeholder="选择分销商" 
              :remote-method="loadDtbList">
              <el-option v-for="dtb in dtbList" :key="dtb.id" :label="dtb.shortName" :value="dtb.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="query.status" clearable placeholder="选择充值单状态">
              <el-option v-for="(value, key) in DtbRechargeStatus" :key="key" :label="value" :value="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="no-top-label">
            <el-button type="primary" icon="search" @click="loadPage(1)">检索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  
    <el-table :data="page.content" v-loading.body="loading" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-if="props.row.rechargeMethod === 1" class="display-form">
            <div v-if="props.row.screenshoot" class="display-item">
              <label>充值凭证：</label>
              <div class="display-content">
                <a :href="props.row.screenshoot">下载</a>
              </div>
            </div>
            <div class="display-item">
              <label>汇出银行：</label>
              <div class="display-content">{{ props.row.bank}}</div>
            </div>
            <div class="display-item">
              <label>银行账户：</label>
              <div class="display-content">{{ props.row.bankCardOwner}}</div>
            </div>
            <div class="display-item">
              <label>银行账号：</label>
              <div class="display-content">{{ props.row.bankCardNo}}</div>
            </div>
            <div class="display-item">
              <label>银行回单号：</label>
              <div class="display-content">{{ props.row.bankTid ? props.row.bankTid : '-'}}</div>
            </div>
          </div>
          <div v-if="props.row.rechargeMethod === 2" class="display-form">
            <div v-if="props.row.screenshoot" class="display-item">
              <label>充值凭证：</label>
              <div class="display-content">
                <a :href="props.row.screenshoot">下载</a>
              </div>
            </div>
            <div class="display-item">
              <label>支付宝账号：</label>
              <div class="display-content">{{ props.row.alipayNo}}</div>
            </div>
            <div class="display-item">
              <label>支付宝账户名：</label>
              <div class="display-content">{{ props.row.alipayOwner}}</div>
            </div>
            <div class="display-item">
              <label>支付宝订单号：</label>
              <div class="display-content">{{ props.row.alipayTid ? props.row.alipayTid : '-'}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="rechargeOn" label="申请时间" width="175" />
      <el-table-column prop="dtbShortName" label="分销商" width="150" />
      <el-table-column prop="rechargeMethod" label="充值方式" align="center" width="95">
        <template slot-scope="scope">
          {{DtbRechargeMethod[scope.row.rechargeMethod]}}
        </template>
      </el-table-column>
      <el-table-column prop="rechargeAmount" label="充值金额" width="120" align="right" />
      <el-table-column prop="confirmOn" label="审核时间" width="175">
        <template slot-scope="scope">
          {{scope.row.confirmOn ? scope.row.confirmOn : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="90">
        <template slot-scope="scope">
          <el-tag :type="['primary', 'success', 'danger'][scope.row.status - 1]">
            {{DtbRechargeStatus[scope.row.status]}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 1">
            <el-button type="success" size="small" @click="approve(scope.row)">已到帐</el-button>
            <el-button type="danger" size="small" @click="reject(scope.row)">拒绝</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- pagination -->
    <el-pagination @current-change="showPage" :current-page.sync="page.page" :page-size="page.pageSize" 
      :total="page.totalElements" layout="total, prev, pager, next, jumper" />
  </div>
</template>

<script>
import { Dtb, DtbRecharge } from '@/store/api'
import Pagination from '@/utils/pagination'
import * as Constants from '@/constants'
export default {
  data() {
    return {
      ...Constants,
      loading: true,
      query: {
        status: '',
        fromDate: null,
        toDate: null,
        dtbId: null
      },
      page: {
        content: []
      },
      dtbList: []
    }
  },
  created() {
    this.loadPage(1)
  },
  methods: {
    ...Pagination,
    list(page, query) {
      this.loading = true
      return DtbRecharge.list(query).then((data) => {
        this.page = data
        this.loading = false
      })
    },
    approve(row) {
      DtbRecharge.approve(row.id).then(() => {
        this.reloadPage()
        this.$notify.success({
          title: '操作成功',
          message: '充值完成，账户余额已更新',
          offset: 100,
          duration: 2000
        })
      })
    },
    reject(row) {
      DtbRecharge.reject(row.id).then(() => {
        this.reloadPage()
        this.$notify.success({
          title: '操作成功',
          message: '已拒绝充值请求',
          offset: 100,
          duration: 2000
        })
      })
    },
    loadDtbList(query) {
      Dtb.list({'keyword': query}).then((page) => {
        this.dtbList = page.content
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 100%;
}

.display-form .display-item label {
  width: 100px;
}
</style>
